<template>
  <div class="login-main">
    <div class="login-5G">
      <img
        src="../../assets/images/login/5g.png"
        alt=""
      >
      <span>产业智联新时代</span>
    </div>
    <div class="login-content">
      <el-row class="login-title clearfix">
        <el-col :span="6">
          <!-- <img src="../../assets/images/login/login-img.png" alt=""> -->
          <img
            src="../../assets/images/icon/logo.png"
            style="width:220px"
          >
        </el-col>
        <el-col :span="18">
          <h1 style="font-size:40px">
            商务信息管理系统
          </h1>
        </el-col>
      </el-row>
      <div class="login-tab">
        <div class="login_form">
          <img
            src="../../assets/images/login/shadow-left.png"
            alt=""
            class="shadow-left"
          >
          <img
            src="../../assets/images/login/shadow-right.png"
            alt=""
            class="shadow-right"
          >
          <h2>找回密码</h2>
          <el-row>
            <el-col
              :span="24"
              class="mgt-50"
            >
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                status-icon
                :rules="rules"
                :span="24"
              >
                <el-form-item prop="tel">
                  <el-input
                    v-model="ruleForm.tel"
                    autocomplete="off"
                    placeholder="请输入您注册的手机号"
                    prefix-icon="icon-user mgl-2"
                  />
                </el-form-item>
                <el-form-item prop="pass">
                  <el-input
                    v-model="ruleForm.pass"
                    type="password"
                    autocomplete="off"
                    placeholder="不少于8个字符，数字+字母"
                    prefix-icon="icon-pwd mgl-2"
                  />
                </el-form-item>
                <el-form-item prop="checkPass">
                  <el-input
                    v-model="ruleForm.checkPass"
                    type="password"
                    autocomplete="off"
                    placeholder="密码验证 "
                    prefix-icon="icon-pwd mgl-2"
                  />
                </el-form-item>
                <el-form-item prop="code">
                  <div class="relative clearfix">
                    <el-input
                      v-model="ruleForm.code"
                      placeholder="请输入验证码"
                      prefix-icon="icon-code mgl-2"
                      autocomplete="off"
                    />
                    <el-button
                      type="primary"
                      class="code_btn"
                    >
                      <span
                        v-show="show"
                        @click="getCode"
                      >发送短信验证码</span>
                      <span
                        v-show="!show"
                        class="count"
                      >{{ count+'秒后获取' }}</span>
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="g-login-btn"
                    type="primary"
                    @click="submitForm('ruleForm')"
                  >
                    提 交
                  </el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import util from '@/utils/util';

Vue.prototype.utils = util;
import { setInterval, clearInterval } from 'timers';
export default {
	name: 'Login',
	data() {
		var checkTel = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('手机号不能为空'));
			} else if (!/^1(3|4|5|6|7|8)\d{9}$/.test(value)) {
				return callback(new Error('请输入正确手机号'));
			} else {
				callback();
			}
		};
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			username: '',
			password: '',
			authCode: '',
			ruleForm: {
				pass: '',
				checkPass: '',
				tel: '',
				code: ''
			},
			rules: {
				pass: [
					{ validator: validatePass, trigger: 'blur' }
				],
				checkPass: [
					{ validator: validatePass2, trigger: 'blur' }
				],
				tel: [
					{ validator: checkTel, trigger: 'blur' }
				],
				code: [{ required: true, message: '请填写验证码', trigger: 'blur' }]
			},
			show: true,
			count: ''
		};
	},
	methods: {
		// 发送短信验证码
		getCode() {
			if (this.ruleForm.tel == '') {
				this.$message.warning('请输入手机号');
				return;
			} else if (!/^1(3|4|5|6|7|8)\d{9}$/.test(this.ruleForm.tel)) {
				return;
			}

			const TIME_COUNT = 60;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			}


			axios({
				method: 'Get',
				url: '/sso/sendCaptcha',
				params: { phoneNo: this.ruleForm.tel }
			}).then((res) => {
				if (res.data.code == '000000') {
					this.$message.success('验证码发送成功');
				} else {
					this.$message.error('验证码发送失败，请稍后重试');
				}
			});

		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let encrypedPassword = this.utils.encrypt(
						this.ruleForm.pass,
						'walrusisverygood',
						'walrusisverygood'
					);
					let param = {
						phoneNo: this.ruleForm.tel,
						captcha: this.ruleForm.code,
						password: encrypedPassword
					};
					this.$ax.axiosPost('/sso/forgetPasswd', param).then(res => {
						if (res.data.code == '000000') {
							this.$alert('重置密码成功', '提示', {
								confirmButtonText: '确定',
								callback: () => {
									this.ruleForm.tel = '';
									this.ruleForm.pass = '';
									this.ruleForm.checkPass = '';
									this.ruleForm.code = '';
									this.$router.push({ path:'/login'  });
								}
							});
						} else {
							this.$message.error(res.data.message);
						}
					});

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	}
};
</script>


